<template>
	<view>
		<u-navbar :custom-back="back" title="规格设置"></u-navbar>
		
		<view class="guige">
			<view class="kuang" v-for="(item,index) in 4">
				<view class="detail_guige">
					<image src="../../static/users/guige.png" mode=""></image>
					<view class="name">
						规格分类名称
					</view>
					<view class="num">
						¥10 库存:100
					</view>
				</view>
				<image class="exit" @click="emit" src="../../static/users/guigai.png" mode=""></image>
				<image class="delete" src="../../static/users/guicha.png" mode=""></image>
			</view>
		</view>
		
		<view class="add" @click="emit">
			<image src="../../static/users/jiagui.png" mode=""></image>
			<text>添加规格</text>
			
		</view>
		
		<view class="over" @click="over">
			完成
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
		emit(){
			uni.navigateTo({
				url:"../editgui/editgui"
			})
		},
		over(){
			uni.redirectTo({
				url:"../addshop/addshop"
			})
		},
		back(){
			uni.redirectTo({
				url:"../addshop/addshop"
			})
		}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F2F4FA;
	}
	.add{
		margin: 30rpx;
		padding: 20rpx 30rpx;
		width: 210rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		image{
			width: 24rpx;
			height: 24rpx;
		}
		text{
			margin-left: 20rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #181818;
		}
	}
	.over{
		position: absolute;
		bottom: 50rpx;
		left: 30rpx;
		width: 690rpx;
		height: 100rpx;
		background: #181818;
		box-shadow: 0px 10rpx 40rpx 0px rgba(24, 24, 24, 0.26);
		border-radius: 50rpx;
		
		text-align: center;
		line-height: 100rpx;
	
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
	.guige {
		padding: 10rpx 30rpx 40rpx 30rpx;
		margin: 30rpx;
		width: 690rpx;
		// height: 440rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		position: relative;
		.kuang {
			position: relative;
			width: 630rpx;
			height: 100rpx;
			.exit {
				position: absolute;
				right: 78rpx;
				top: 36rpx;
				width: 28rpx;
				height: 28rpx;
			}

			.delete {
				position: absolute;
				right: 0rpx;
				top: 36rpx;
				width: 28rpx;
				height: 28rpx;
			}


			.detail_guige {
				margin-top: 30rpx;
				padding: 10rpx;
				width: 480rpx;
				height: 100rpx;
				background: #F2F4FA;
				border-radius: 30rpx;
				position: relative;

				image {
					width: 100rpx;
					height: 80rpx;
				}

				.name {
					font-size: 26rpx;
					position: absolute;
					left: 120rpx;
					top: 25rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #181818;
				}

				.num {
					position: absolute;
					left: 120rpx;
					top: 60rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 300;
					color: #999999;
				}
			}
		}


	}
</style>
